<template>
  <section class="bw-layout-header">
    <div class="header-title">
      <span class="main-title" @click="toMainPage"> {{ curAppName }} </span>

      <span class="sub-title"> {{ curComName }} </span>
    </div>

    <div class="header-menu">
      <a-menu
        v-bind="curMenuOptions"
        v-model:selectedKeys="actionKeys"
        @click="onSelectMenu"
      />
    </div>

    <div class="header-action">
      <template v-if="isAction">
        <a-button
          class="bw-bnt"
          type="primary"
          :loading="saveLoading"
          @click="onSave"
        >
          保存
        </a-button>

        <a-button class="bw-bnt" :loading="renderLoading" @click="onSaveRender">
          锁定
        </a-button>
        <a-button class="bw-bnt" :loading="previewLoading" @click="onPreview">
          预览
        </a-button>
      </template>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { getAppEnvConfig } from '@/utils/env'
import { ref, unref, computed, watch, onMounted, nextTick } from 'vue'
import { getAppInfo, getComInfo, useComInfoStoreWithOut } from '/@/store'

import { BwRouterNavMenuTypeEnum } from '@/enums/routerMeta'
import { MenuProps } from 'ant-design-vue'

interface BwLayoutHeaderProps {
  saveLoading: boolean
  renderLoading: boolean
  previewLoading: boolean
}

const emit = defineEmits(['save', 'preview', 'saveRender'])
const props = withDefaults(defineProps<BwLayoutHeaderProps>(), {
  saveLoading: false,
  renderLoading: false,
  previewLoading: false,
})

const route = useRoute()
const env = getAppEnvConfig()
const comStroe = useComInfoStoreWithOut()

const isAction = ref<boolean>(false)
const actionKeys = ref<Array<string>>([BwRouterNavMenuTypeEnum.customComDesign])

const curAppName = computed(() => {
  const info = comStroe.curAppInfo
  return info?.name ?? '自定义组件'
})
const curComName = computed(() => {
  const info = comStroe.curComInfo
  return info?.name ?? ''
})

const curMenuOptions = computed((): MenuProps => {
  return {
    mode: 'horizontal',
    items: [
      {
        title: '组件设计',
        label: '组件设计',
        key: BwRouterNavMenuTypeEnum.customComDesign,
      },
      {
        title: '组件配置',
        label: '组件配置',
        key: BwRouterNavMenuTypeEnum.customComSetup,
      },
    ],
  }
})
const curAppId = computed<string>(() => {
  const appId = route.params.appId
  return appId ? appId.toString() : appId
})
const curPageId = computed<string>(() => {
  const pageId = route.params.pageId
  return pageId ? pageId.toString() : pageId
})

const onSave = () => emit('save')
const onPreview = () => emit('preview')
const onSaveRender = () => emit('saveRender')

const toMainPage = () => {
  const otherWindow = window?.parent
  const host = env.VITE_APP_Micro_Apps_Main
  const url = `${host}/workbench/customCom/${unref(curAppId)}/${unref(curPageId)}/entrance/preview`

  otherWindow ? (otherWindow.location.href = url) : (window.location.href = url)
}

const toPage = (type: BwRouterNavMenuTypeEnum) => {
  const otherWindow = window?.parent
  const host = env.VITE_APP_Micro_Apps_Custom_Com
  const url = `${host}/${unref(curAppId)}/${type}/${unref(curPageId)}`

  otherWindow ? (otherWindow.location.href = url) : (window.location.href = url)
}

/** 选中菜单 */
const onSelectMenu = (data: Record<string, any>) => {
  const item: BwRouterNavMenuTypeEnum = data.key
  if (item) {
    toPage(item)
  }
}

onMounted(() => {
  nextTick(() => {
    Promise.all([
      getAppInfo(unref(curAppId)),
      getComInfo(unref(curAppId), unref(curPageId)),
    ])
  })
})

watch(
  () => route,
  (newVal) => {
    const type = newVal.meta.navMenuKey
    if (
      [
        BwRouterNavMenuTypeEnum.customComDesign,
        BwRouterNavMenuTypeEnum.customComSetup,
      ].includes(type)
    ) {
      actionKeys.value = [type]
      isAction.value = type === BwRouterNavMenuTypeEnum.customComDesign
    }
  },
  { deep: true, immediate: true }
)
</script>

<style lang="less" scoped>
.bw-layout-header {
  width: 100vw;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e8e8e8;

  .header-title {
    font-size: 18px;
    font-weight: 600;
    margin-left: 16px;
    display: flex;
    justify-content: flex-start;

    .main-title {
      cursor: pointer;
    }

    .sub-title {
      font-size: 14px;
      font-weight: 500;
      margin-left: 16px;
    }
  }

  .header-menu {
    // flex: 1;
    :deep(.ant-menu-horizontal) {
      border: none;

      .ant-menu-item {
        padding-inline: 8px;

        &::after {
          inset-inline: 8px;
        }
      }
    }
  }

  .header-action {
    min-width: 152px;
    padding-right: 8px;

    .bw-bnt {
      margin-right: 8px;
    }
  }
}
</style>
